<script setup lang="ts">
import * as Enums from '@firewall/engine/Enums';
import Ips from '@firewall/engine/Ips';

const { t } = useI18n({ inheritLocale: true, useScope: 'local' });

interface Props {
  rule?: string,
}
const props = withDefaults(defineProps<Props>(), {
  rule: () => '',
});
type Emit = {
  (e: 'update:rule', item: string): void,
}
const emit = defineEmits<Emit>();
// 攻击类型的查询需要使用模糊匹配，所以这里选项“全部攻击类型”对应的值为 Enums.FILTER_EMPTY，
// 以便 LogService.fetchRawLogs 统一进行搜索参数的处理
const rules = ref([
  { nameCn: t('allIntrusions'), nameEn: Enums.FILTER_EMPTY },
  ...(await Ips.getMethodSummaryList()),
]);

const onSelectorResolve = () => {
  emit('update:rule', Enums.FILTER_EMPTY);
};

const onSelectorChange = (item: string) => {
  emit('update:rule', item);
};
</script>

<template>
  <div class="ips-rule-selector">
    <Suspense :onResolve="onSelectorResolve">
      <ElSelect
        :model-value="props.rule"
        class="selector"
        filterable
        @change="onSelectorChange"
      >
        <ElOption
          v-for="item in rules"
          :key="item.nameEn"
          :value="item.nameEn"
          :label="item.nameCn"
        />
      </ElSelect>
      <template #fallback>
        <div v-loading="true" class="ips-selector-placeholder" />
      </template>
    </Suspense>
  </div>
</template>

<i18n lang="yaml" locale="zh-CN">
  allIntrusions: '全部攻击类型'
</i18n>

<style lang="scss" scoped>
.selector {
  width: 160px;
}

.firewall-selector-placeholder {
  :deep(.el-loading-mask) {
    background-color: transparent;
    transform: scale(0.5);
  }
}
</style>
